<template>
    <div class="layout-container h-screen w-screen flex overflow-hidden">
        <div class="layout-aside transition-width duration-300 shrink-0" :style="{width:asideWidth}">
            <!--      <global-logo></global-logo>-->
            <comp-nav-menu :menuData="menuList"></comp-nav-menu>
        </div>
        <div class="flex-1 h-screen flex flex-col overflow-hidden">
            <div class="layout-header pl-5 pr-5 flex items-center justify-between bg-[var(--df-header-bg-color)] h-[56px]">
                <div class="left-action flex items-center">
                    <atom-menu-toggle></atom-menu-toggle>
                </div>
                <div class="right-action flex items-center">
                    <el-space :size="5">
                        <atom-refresh></atom-refresh>
                        <atom-fullscreen></atom-fullscreen>
                        <atom-theme></atom-theme>
                        <atom-skin></atom-skin>
                        <atom-user></atom-user>
                    </el-space>
                </div>
            </div>
            <div class="layout-main p-3 overflow-hidden box-border flex-1">
                <router-view></router-view>
            </div>
        </div>

    </div>
</template>


<script setup>

import { ref, computed } from 'vue'
import CompNavMenu from './components/compNavMenu.vue'
import GlobalLogo from './modules/global-logo/index.vue'
import AtomFullscreen from './components/atom-fullscreen.vue'
import AtomTheme from './components/atom-theme.vue'
import AtomSkin from './components/atom-skin.vue'
import AtomRefresh from './components/atom-refresh.vue'
import AtomUser from './components/atom-user.vue'
import AtomMenuToggle from './components/atom-menu-toggle.vue'
import { useCollapsedStore } from '@/stores/collapsed.js'

const store = useCollapsedStore()

const asideWidth = computed(() => {
    return store.isCollapsed ? '64px' : '200px'
})

const mainWidth = computed(() => {
    return store.isCollapsed ? 'calc(100% - 64px)' : 'calc(100% - 200px)'
})

const menuList = ref([
    // { title: '首页', path: '/home', icon: 'icon-zhongkong_o' },
    { title: '平台用户', path: '/platform-user', icon: 'icon-guanliyuanrenzheng' },
    { title: '约球活动', path: '/platform-active-ball', icon: 'icon-CPhezuo' },
    {
        title: '比赛管理', icon: 'icon-duibi', path: '/platform-score',
        children: [
            { icon: 'icon-duibi', title: '比赛记录', path: '/platform-match-record', },
            { title: '赛制管理', path: '/platform-points-rule-s', icon: 'icon-duibi', }
        ],
    },

    {
        title: '积分管理',
        icon: 'icon-xinwen',
        path: '/points',
        children: [
            { title: '积分记录', path: '/platform-points', icon: 'icon-duibi' },
            { title: '关联P管理', path: '/platform-points-rule-p', icon: 'icon-duibi' },
        ],
    },

    {
        title: '涨球管理',
        icon: 'icon-xinwen',
        path: '/zq',
        children: [
            { title: '动作管理', path: '/platform-motion', icon: 'icon-fuwu' },
            { title: '目录管理', path: '/platform-motion-catalog', icon: 'icon-caidan' },
            { title: '素材审核', path: '/platform-motion-material', icon: 'icon-fuwu' },
        ],
    },

    {
        title: '文章管理',
        path: '/platform-article-list',
        icon: 'icon-jianpan_o',
        children: [
            { title: '文章列表', path: '/platform-article-list', icon: 'icon-jingliren_o', },
            // { title: '文章分类', path: '/platform-article-category', icon: 'icon-jingliren_o'},
        ],
    },

    // {
    //     title: '小程序配置',
    //     path: '/wechat',
    //     icon: 'icon-jianpan_o',
    //     children: [
    //         {
    //             title: '订阅配置',
    //             path: '/subscribe-template',
    //             icon: 'icon-jingliren_o',
    //         },
    //     ],
    // },

    {
        title: '用户建议',
        path: '/platform-user-suggest',
        icon: 'icon-weixiufuwu',
    },

    // {
    //     title: '权限管理',
    //     path: '/menutest/menu1',
    //     icon: 'icon-quanjushezhi',
    //     children: [
    //         {
    //             title: '用户列表',
    //             path: '/sys-user',
    //             icon: 'icon-jingliren_o',
    //         },
    //         {
    //             title: '菜单列表',
    //             path: '/sys-menu',
    //             icon: 'icon-caidan',
    //         },
    //         {
    //             title: '角色列表',
    //             path: '/sys-role',
    //             icon: 'icon-dengyu_o',
    //         },
    //     ],
    // },
    // {
    //     title: '数据管理',
    //     path: '/menutest/menu2',
    //     icon: 'icon-zhediedaohang',
    //     children: [
    //
    //         {
    //             icon: 'icon-zhediedaohang',
    //             title: '图标管理',
    //             path: '/hotspot-icon',
    //         },
    //         {
    //             icon: 'icon-zhediedaohang',
    //             title: '字典管理',
    //             path: '/menutest/menu2/menu2-1',
    //         }
    //     ],
    // },
])
</script>


<style lang="less" scoped>
.layout-container {

    .layout-header {
        border-bottom: 1px solid var(--df-header-border-color);
    }

    .layout-aside {
        background: var(--df-aside-bg-color);
    }

    .layout-main {
        background: var(--df-page-bg-color);
    }
}

</style>